import React from "react";
import { NavBar } from "antd-mobile";
import { Form,  Button } from "antd-mobile";
import "./index.css";
import { Wechat } from "@react-vant/icons";
import http from "../../api/http";
import { useNavigate } from "react-router-dom";
import { Input} from 'antd';
function Index() {
  const navigate = useNavigate();
  const onFinish = async (value) => {
    const res = await http.post("/api/register", value);
    const { code } = res.data;

    if (code === 200) {
      navigate("/login");
    }
  };
  // 实现注册页功能
// 4-1.表单各项输入验证必填
// 4-2.邮箱使用正则验证是否是网易邮箱或qq邮箱
// 4-3.密码和确认密码可以通过点击眼睛图标查看明文
  return (
    <div>
      <NavBar onBack={""}></NavBar>

      <div>
        <h2>注册账号</h2>
      </div>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button
            block
            type="submit"
            color="warning"
            size="large"
            onClick={() => navigate("/login")}
          >
            注册
          </Button>
        }
      >
        <Form.Header></Form.Header>
        <Form.Item
          name="username"
          label=""
          rules={[
            { required: true },
            { type: "string", min: 6 },
            { type: "email", warningOnly: true },
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item
          name="password"
          label=""
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <div>
           <Input.Password placeholder="1234" />
          </div>
        </Form.Item>
        <Form.Item
          name="password1"
          label=""
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <div>
           <Input.Password placeholder="请确认密码" />
          </div>
        </Form.Item>
      </Form>

      <p className="text">或</p>

      <div className="weixin">
        <Wechat color="green" />
        <span>使用微信登录</span>
      </div>
      <div className="weixin">
        <Wechat color="blue" />
        <span>使用qq登录</span>
      </div>

      <div style={{ marginTop: "200px" }}>
        <span>登录及表示我接受《服务条款》和《社区指南》并已阅读一世影虎</span>
      </div>
    </div>
  );
}

export default Index;
